<template>
    <div class="page_setting">
        <el-form :disabled="!checkPermission('distribution_audit:set_edit')" :model="form" label-width="100px">
            <el-form-item label="成为分销员" prop="autoApply">
                <el-radio-group v-model="form.autoApply">
                    <el-radio :label="false">人工审核</el-radio>
                    <el-radio :label="true">自动通过</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="分销员升级" prop="autoUpgrade">
                <el-radio-group v-model="form.autoUpgrade">
                    <el-radio :label="false">人工审核</el-radio>
                    <el-radio :label="true">自动通过</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <div class="bottom">
            <el-button type="primary" v-auth="'distribution_audit:set_edit'" @click="submitHandler">保存</el-button>
        </div>
    </div>
</template>

<script setup name="">
import { ref, reactive, inject, onMounted, onUnmounted, nextTick } from 'vue';
import { checkPermission } from '@/commons/utils.js';
import { ElMessage } from 'element-plus';
import request from '@/request';
const confirm = inject('confirm');

const form = reactive({
    autoApply: true, //成为分销员是否自动通过审核
    autoUpgrade: true //分销员升级是否自动通过审核
});
const initSettingData = () => {
    request('queryAuditDistributionSettingServ').then(res => {
        form.autoApply = res?.data?.info?.autoApply;
        form.autoUpgrade = res?.data?.info?.autoUpgrade;
    });
};
const submitHandler = async () => {
    try {
        if (await confirm(`确认保存吗？`, '', '提示')) {
            request('updateAuditDistributionSettingServ', form).then(res => {
                ElMessage.success(`操作成功`);
                initSettingData();
            });
        }
    } catch (e) {}
};
onMounted(() => {
    initSettingData();
    nextTick(() => {
        document.querySelector('.layout-box').classList.add('setting_relative');
        document.querySelector('.layout-content').classList.add('setting_blow_padding_bottom');
    });
});
onUnmounted(() => {
    nextTick(() => {
        document.querySelector('.layout-box').classList.remove('setting_relative');
        document.querySelector('.layout-content').classList.remove('setting_blow_padding_bottom');
    });
});
</script>
<style>
.setting_relative {
    position: relative;
}
.setting_blow_padding_bottom {
    /* 减去页面底部按钮高度 -190px-54px */
    min-height: calc(100vh - 244px) !important;
}
</style>
<style lang="scss" scoped>
.page_setting {
    .bottom {
        text-align: center;
        background: #ffffff;
        width: 100%;
        height: 54px;
        line-height: 54px;
        position: absolute;
        bottom: 0;
        left: 0;
    }
}
</style>
